<!DOCTYPE html>
<html lang="en">
  <head>
    <!--
      jQuery-menu-aim: this example uses Twitter's Bootstrap
      (http://twitter.github.com/bootstrap) to setup a clean example page.

      Search for "jQuery-menu-aim" in this page to find the jQuery-menu-aim
      integration examples.
    -->

    <meta charset="utf-8">
    <title>jQuery-menu-aim example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- 
      jQuery-menu-aim: the following styles are used to customize bootstrap's
      dropdowns and popover to play a little nicer w/ this example. They are
      personal choices and not necessary for your use of jQuery-menu-aim.
      jQuery-menu-aim is HTML/style-agnostic, it simply fires events when menu
      items should be activated.
      You can choose to do whatever you want w/ those events.
    -->
    <style>
        .popover {
            width: 400px;
            -webkit-border-top-left-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            overflow: hidden;
        }

        .popover-content {
            text-align: center;
        }

        .popover-content img {
            height: 212px;
            max-width: 250px;
        }

        .dropdown-menu > li > a:hover {
            background-image: none;
            color: white;
            background-color: rgb(0, 129, 194);
            background-color: rgba(0, 129, 194, 0.5);
        }

        .dropdown-menu > li > a.maintainHover {
            color: white;
            background-color: #0081C2;
        }
    </style>

    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">A dropdown example</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Explore the Monkeys</a>

                <!--
                  jQuery-menu-aim: this <ul> defines the dropdown main menu and its contents.
                  This is just one of many possible examples for defining the menu's HTML.
                  jQuery-menu-aim is agnostic to your HTML structure, it only fires events to
                  be used as you please.
                -->
                <ul class="dropdown-menu" role="menu">
                    <li data-submenu-id="submenu-patas"><a href="#">Patas</a></li>
                    <li data-submenu-id="submenu-snub-nosed"><a href="#">Golden Snub-Nosed</a></li>
                    <li data-submenu-id="submenu-duoc-langur"><a href="#">Duoc Langur</a></li>
                    <li data-submenu-id="submenu-pygmy"><a href="#">Baby Pygmy Marmoset</a></li>
                    <li data-submenu-id="submenu-tamarin"><a href="#">Black Lion Tamarin</a></li>
                    <li data-submenu-id="submenu-monk"><a href="#">Monk Saki</a></li>
                    <li data-submenu-id="submenu-gabon"><a href="#">Gabon Talapoin</a></li>
                    <li data-submenu-id="submenu-grivet"><a href="#">Grivet</a></li>
                    <li data-submenu-id="submenu-red-leaf"><a href="#">Red Leaf</a></li>
                    <li data-submenu-id="submenu-king-colobus"><a href="#">King Colobus</a></li>
                </ul>

              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <h1>jQuery-menu-aim example</h1>
      <p>Click "Explore the Monkeys" above to start playing around w/ the dropdown. View source and search for "jQuery-menu-aim" to find all the integration points for this example.</p>

    </div>

    <!--
      jQuery-menu-aim: the following defines each submenu's content. There are a million
      and one ways to do this, places to structure the HTML, etc. This is just one example.
      jQuery-menu-aim is agnostic to your HTML structure, it only fires events to be used
      as you please.
    -->
    <div id="submenu-patas" class="popover">
        <h3 class="popover-title">Patas</h3>
        <div class="popover-content"><img src="img/patas.png"></div>
    </div>
    <div id="submenu-snub-nosed" class="popover">
        <h3 class="popover-title">Golden Snub-Nosed</h3>
        <div class="popover-content"><img src="img/snub-nosed.png"></div>
    </div>
    <div id="submenu-duoc-langur" class="popover">
        <h3 class="popover-title">Duoc Langur</h3>
        <div class="popover-content"><img src="img/duoc-langur.png"></div>
    </div>
    <div id="submenu-pygmy" class="popover">
        <h3 class="popover-title">Baby Pygmy Marmoset</h3>
        <div class="popover-content"><img src="img/pygmy.png"></div>
    </div>
    <div id="submenu-tamarin" class="popover">
        <h3 class="popover-title">Black Lion Tamarin</h3>
        <div class="popover-content"><img src="img/tamarin.png"></div>
    </div>
    <div id="submenu-monk" class="popover">
        <h3 class="popover-title">Monk Saki</h3>
        <div class="popover-content"><img src="img/monk.png"></div>
    </div>
    <div id="submenu-gabon" class="popover">
        <h3 class="popover-title">Gabon</h3>
        <div class="popover-content"><img src="img/gabon.png"></div>
    </div>
    <div id="submenu-grivet" class="popover">
        <h3 class="popover-title">Grivet</h3>
        <div class="popover-content"><img src="img/grivet.png"></div>
    </div>
    <div id="submenu-red-leaf" class="popover">
        <h3 class="popover-title">Red Leaf</h3>
        <div class="popover-content"><img src="img/red-leaf.png"></div>
    </div>
    <div id="submenu-king-colobus" class="popover">
        <h3 class="popover-title">King Colobus</h3>
        <div class="popover-content"><img src="img/colobus.png"></div>
    </div>

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="../jquery.menu-aim.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>

        var $menu = $(".dropdown-menu");

        // jQuery-menu-aim: <meaningful part of the example>
        // Hook up events to be fired on menu row activation.
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu
        });
        // jQuery-menu-aim: </meaningful part of the example>

        // jQuery-menu-aim: the following JS is used to show and hide the submenu
        // contents. Again, this can be done in any number of ways. jQuery-menu-aim
        // doesn't care how you do this, it just fires the activate and deactivate
        // events at the right times so you know when to show and hide your submenus.
        function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId),
                offset = $menu.offset(),
                height = $menu.outerHeight(),
                width = $menu.outerWidth();

            // Show the submenu
            $submenu.css({
                display: "block",
                top: offset.top,
                left: offset.left + width - 5,  // main should overlay submenu
                height: height - 4  // padding for main dropdown's arrow
            });

            // Keep the currently activated row's highlighted look
            $row.find("a").addClass("maintainHover");
        }

        function deactivateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);

            // Hide the submenu and remove the row's highlighted look
            $submenu.css("display", "none");
            $row.find("a").removeClass("maintainHover");
        }

        $(document).click(function() {
            // Simply hide the submenu on any click. Again, this is just a hacked
            // together menu/submenu structure to show the use of jQuery-menu-aim.
            $(".popover").css("display", "none");
        });

    </script>

  </body>
</html>

